<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="keywords" content="云净,透析单,网页透析" />
    <meta http-equiv="description" content="云净透析单" />
    <link href="../../image/yunjing/logo.ico" type="image/x-icon" rel="shortcut icon">
    <title>打印病程记录</title>
    <style>
        @media print {
            hr,
            .print-warp,
            .print-hr2 {
                page-break-after: always;
            }
            #medical_print_ipt {
                display: none;
                font-size: 0;
            }
        }

        * {
            box-sizing: border-box;
            font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑, STHeiti,
            MingLiu;
        }

        hr {
            border: none;
        }

        span {
            display: inline-block;
            word-wrap: break-word;
            word-break: break-all;
        }

        #print_wrapper,
        #print_wrapper_clone {
            width: 210mm;
            margin: 0 auto;
            font-size: 14px;
            position: relative;
            top: 0;
            left: 0;
        }

        .print-list-item {
            margin-bottom: 6px !important;
            position: relative;
        }

        .content-list-item {
            width: 95%;
            position: relative;
            padding-left: 116px;
            padding-right: 20px;
            min-height: 22px;
        }

        .content-list-item .content-list-title {
            position: absolute;
            left: -8px;
            width: 116px;
            text-align: right;
        }

        span.content-list-text {
            padding-right: 10px;
        }

        .list-item-tgjc {
            height: 45px;
            line-height: 30px;
            font-size: 20px;
            font-weight: 500;
            position: relative;
            text-align: center;
        }

        .health_checkup_tip1 {
            flex: 1;
        }

        /* 病历页眉 */

        .medical-page-header {
            height: 106px;
            width: 100%;
            position: relative;
        }

        .page-footer {
            text-align: center;
            position: absolute;
            top: 1132px;
            width: 100%;
        }

        .medical-page-header h2 {
            text-align: center;
            height: 75px;
            line-height: 68px;
            letter-spacing: 5px;
            font-size: 26px;
            font-family: "Microsoft YaHei";
            margin: 0 !important;
        }

        .medical-page-header .print_header {
            display: flex;
            justify-content: space-around;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
        }

        /* 患者基本信息 */

        .print-table td {
            word-wrap: break-word;
            word-break: break-all;
        }

        .print-table {
            width: 100%;
            text-align: center;
            border-collapse: collapse;
            line-height: 35px;
        }

        .line-table {
            width: 100%;
            line-height: 20px;
        }

        .medical-baseinfo {
            width: 90%;
            margin: 0 auto;
        }

        .baseinfo_td {
            position: relative;
            height: 20px;
            line-height: 20px;
        }

        .baseinfo_span {
            width: 72px;
            display: flex;
            justify-content: space-between;
        }

        .baseinfo_span span {
            text-align: center;
        }

        .baseinfo_data {
            position: absolute;
            left: 78px;
            top: 0;
        }

        #medical_print_ipt {
            height: 35px;
            background-color: #21c6b6;
            border-radius: 4px;
            letter-spacing: 5px;
            color: #fff;
            border: none;
            outline: none;
        }

        #medical_print_ipt:hover {
            opacity: 0.92;
        }

        table {
            width: 100%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="print_wrapper"></div>
    <div class="point-mark-items mark-a-items">
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">1</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">2</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">3</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">4</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">5</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">6</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">7</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">8</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">9</div>
        <div class="point-mark-a-item not-able" data-tag="-a" data-mark="A" title="点击添加标记">10</div>
    </div>
    <p class="point-mark-title">V端：</p>
    <div class="point-mark-items mark-v-items">
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">1</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">2</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">3</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">4</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">5</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">6</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">7</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">8</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">9</div>
        <div class="point-mark-v-item not-able" data-tag="-v" data-mark="V" title="点击添加标记">10</div>
    </div>
    <script type="text/template" id='tpl_print_bcjl'>

        <div>
            <table>
                <thead>
                    <tr>
                        <td colspan="4">{{hos_name}}</td>
                    </tr>
                    <tr>
                        <td width=25%>姓名：{{hzinfo.tx_name}}</td>
                        <td width=25%>病区：{{hzinfo.tx_bing_qu}}</td>
                        <td width=25%>床号：{{hzinfo.tx_bed_number}}</td>
                        <td width=25%>住院号：{{hzinfo.tx_zyid}}</td>
                    </tr>
                </thead>
                <tbody>
                    {{each bcjllist v i}}
                    <tr>
                        <td colspan="4">
                            <div>
                                <div>{{bcjllist[i].bc_NAME}}</div>
                                <div>{{bcjllist[i].recording_DATE.substring(0,16)}}</div>
                                <div>{{bcjllist[i].bc_CONTENT}}</div>
                                <div>医师签名：{{bcjllist[i].bc_DOCTOR}}</div>
                            </div>
                        </td>
                    </tr>
                    {{/each}}
                </tbody>
            </table>
        </div>
    </script>
    <script src="../../js/jquery/jquery-1.9.1.min.js"></script>
    <script src="../../js/layer/layer.js"></script>
    <script src="../../js/common/template-web.js"></script>
    <script src="../../js/common/jQuery.print.js"></script>
    <script>
        // 获取查询参数
        var html = '<tr>' +
            '<td colspan="4">' +
            '<div>' +
            '<div>{{bcjllist[i].bc_NAME}}</div>' +
            '<div>{{bcjllist[i].recording_DATE.substring(0,16)}}</div>' +
            '<div id="bc_content_{{i}}"></div>' +
            '<div>医师签名：{{bcjllist[i].bc_DOCTOR}}</div>' +
            '</div>' +
            '</td>' +
            '</tr>'

        function getQueryString(name) { //name为传入参数
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null)
                return unescape(r[2]);
            return null;
        }
        var tx_number = getQueryString("tx_number");
        var tx_start_time = getQueryString("tx_start_time");
        var tx_end_time = getQueryString("tx_end_time");
        console.log(tx_number, tx_start_time, tx_end_time)

        // 查询病程记录打印
        function printBcjl() {
            $.ajax({
                url: "../../bcjldy/dybcjllist.shtml",
                type: "POST",
                data: {
                    "tx_number": tx_number,
                    "tx_start_time": "",
                    "tx_end_time": ""
                },
                success: function (res) {
                    console.log(res)
                    if (res.bcjllist.length == 0) {
                        layer.msg("该患者暂无病程记录");
                        return false;
                    }
                    var printHtml = template("tpl_print_bcjl", res);
                    $("#print_wrapper").append(printHtml)

                },
                error: function (res) {
                    console.log(res);
                }
            });
        }

        printBcjl()
    </script>
    <script>
        var reloadXgtlPageDOM = $("#mainpage").html();
        var randomNumber = parseInt(Math.random() * 10000000);
        var xgtlTagId;
        localStorage.setItem("xgtlMarkImgStatus", "normal");
        $("#ossPointMarkImg").attr("src",
            "https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number +
            ".png?tt=" + randomNumber);
        $("#ossPointMarkImg").attr("onerror",
            "this.src='https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/1162/default.png?v=20180126';xgtlImgLoadError();"
        )
        reloadXgtlPageDOM = $("#mainpage").html(); //保存加载图片后的页面

        function addMark(self) {
            localStorage.setItem("xgtlMarkStatus", "active");
            $(self).siblings(".page_btn_word").removeClass("hidden");
            $(self).addClass("hidden");
            $("div.point-mark-items > div").removeClass("not-able")
        }
        // 标记点移动方法
        function markMovePoint(event) {
            // 标记移动
            $(event).myDrag({
                parent: '#point_mark_img_wrap1', //定义拖动不能超出的外框,拖动范围
                randomPosition: false, //初始化随机位置
                direction: 'all', //方向
                handler: false, //把手
                dragStart: function (x, y) {}, //拖动开始 x,y为当前坐标
                dragEnd: function (x, y) {}, //拖动停止 x,y为当前坐标
                dragMove: function (x, y) {} //拖动进行中 x,y为当前坐标
            });

            // 旋转指示线条角度
            $(event).off("dblclick.rotate1").on("dblclick.rotate1", function () {
                var $markLineTag = $(this).find(".mark-line");
                var rotate = parseInt($markLineTag.data("rotate"));
                if ($markLineTag.hasClass("mark-line-a")) {
                    rotate -= 12;
                } else {
                    rotate += 12;
                }
                $markLineTag.data("rotate", rotate)
                $markLineTag.css("transform", "rotate(" + rotate + "deg)")
            })
        }

        // 文本框移动
        function markMovePoint2(event) {
            var $that = $(event);
            $that.find("input.mark-text-ipt").on("blur", function () {
                $that.removeClass("active");
            })
            $that.find("span.remove-mark-text").on("click.remove", function () {
                $that.remove();
            })

            var flag = 0; //标记
            var oDiv = $(event)[0];
            var ToffsetWidth = oDiv.offsetWidth;
            var ToffsetHeight = oDiv.offsetHeight;
            var parentWidth = $("#point_mark_img_wrap1").width() || 600;
            var parentHeight = $("#point_mark_img_wrap1").height() || 200;
            var disX, disY, L, T, starX, starY, starXEnd, starYEnd;
            $that.find("input.mark-text-ipt").off("dblclick.rotate2").on("dblclick.rotate2", function (e) {
                e.stopPropagation();
                var $markLineTag = $(this).siblings(".mark-text-line");
                var rotate = parseInt($markLineTag.data("rotate"));
                rotate += 12;
                $markLineTag.data("rotate", rotate)
                $markLineTag.css("transform", "rotate(" + rotate + "deg)")
            })

            $that.mousedown(function (e) {
                flag = 1;
                //e.preventdefault(); //阻止默认事件
                disX = e.clientX - this.offsetLeft;
                disY = e.clientY - this.offsetTop;

                //鼠标按下时的坐标
                starX = e.clientX;
                starY = e.clientY;
                $(document).on("mousemove.marktext", function (e) {
                    L = e.clientX - disX;
                    T = e.clientY - disY;

                    //移动时 当前位置与起始位置之间的差值
                    starXEnd = e.clientX - starX;
                    starYEnd = e.clientY - starY;
                    //console.log(L);
                    if (L < 8) { //限制拖拽的X范围，不能拖出屏幕，8是padding的值
                        L = 8;
                    } else if (L > parentWidth - ToffsetWidth) {
                        L = parentWidth - ToffsetWidth;
                    }
                    if (T < 8) { //限制拖拽的Y范围，不能拖出屏幕
                        T = 8;
                    } else if (T > parentHeight - ToffsetHeight) {
                        T = parentHeight - ToffsetHeight;
                    }
                    moveX = L + "px";
                    moveY = T + "px";
                    //console.log(moveX);
                    oDiv.style.left = moveX;
                    oDiv.style.top = moveY;
                });
            })

            oDiv.addEventListener("mouseup", function (e) {
                $(document).off("mousemove.marktext")
            })
        }

        /* ===========保存标记==========S  */
        function saveXgtlMark() {

            if (localStorage.getItem("xgtlMarkImgStatus") == "empty") {
                layer.msg("请先上传需要标记的图片！")
                return false;
            }
            var sendData = {},
                markDataA = [],
                markDataV = [],
                markDataT = [];

            // 移除空白的备注框	 
            $("#point_mark_img_wrap1 div.add-mark-text-wrap input").each(function (i, v) {
                if (!$(this).val()) {
                    $(this).parent("div.add-mark-text-wrap").remove()
                }
            })

            // 遍历标注的点的数据
            $("div.point-mark-items div.not-allow").each(function (i, v) {
                var dataMark = $(v).data("mark");
                var markNum = $(v).text();
                var $that, left, top, rotate;
                if (dataMark === "A") {
                    $that = $("div.mark-target-a" + markNum);
                    left = parseInt($that.position().left);
                    top = parseInt($that.position().top);
                    rotate = parseInt($that.find(".mark-line").data("rotate"));
                    markDataA.push({
                        "markNum": markNum,
                        "left": left,
                        "top": top,
                        "rotate": rotate
                    });
                } else {
                    $that = $("div.mark-target-v" + markNum);
                    left = parseInt($that.position().left);
                    top = parseInt($that.position().top);
                    rotate = parseInt($that.find(".mark-line").data("rotate"));
                    markDataV.push({
                        "markNum": markNum,
                        "left": left,
                        "top": top,
                        "rotate": rotate
                    });
                }
            })

            // 遍历文本框的数据
            var parent_w = $("#point_mark_img_wrap1").outerWidth() / 100,
                parent_h = $("#point_mark_img_wrap1").outerHeight() / 100;
            console.log(parent_w, parent_h)
            $("#point_mark_img_wrap1 div.add-mark-text-wrap").each(function (i, v) {
                var $that = $(this);
                var text = $that.find("input").val();
                var left = parseInt($that.position().left) / parent_w,
                    top = parseInt($that.position().top) / parent_h,
                    width = parseInt($that.find("input").data("width")),
                    w = parseInt($that.width()) / parent_w,
                    rotate = parseInt($that.find(".mark-text-line").data("rotate"));
                markDataT.push({
                    "left": left,
                    "top": top,
                    "text": text,
                    "rotate": rotate,
                    "width": width,
                    "w": w
                })
            })

            sendData.A = markDataA;
            sendData.V = markDataV;
            sendData.T = markDataT;
            if (sendData.A.length == 0 && sendData.V.length == 0 && sendData.T.length == 0) {
                layer.msg("未做任何标记")
                return
            }
            var data = {
                "tx_id": xgtlTagId,
                "tx_number": tx_number,
                "tx_xgtl_a": "",
                "tx_xgtl_v": "",
                "tx_xgtl_text": JSON.stringify(sendData)
            }
            $.post("xgtl/savexgtlwdt.shtml", data, function (res) {
                if (res.status != 0) {
                    layer.msg("保存成功！")
                    localStorage.setItem("xgtlMarkStatus", "not-able");
                    $("#reloadXgtlPage,#reloadXgtlPage").addClass("hidden");
                    $("#addMarkBtn").removeClass("hidden");
                    $("div.point-mark-items > div").addClass("not-able")
                } else {
                    layer.msg("保存失败，请重试")
                }
            })

            /* markDataA.map(function(i,v){
                //console.log(i)
                var	tag_span_a1 = '<span class="mark-line mark-line-a" style="transform: rotate('+i.rotate+'deg);" data-rotate="'+i.rotate+'"></span>';
                var markDom = '<div title="双击调整线条角度" class="mark-target-a mark-target' + i.markNum + '" data-num='+ i.markNum +' style="left:'+i.left+'px;top:'+i.top+'px;">' + i.markNum + tag_span_a1 + '</div>';
                $(markDom).appendTo($("#point_mark_img_wrap1"));
            })  */
        }

        $(function () {
            init_xgtllist();
            $.ajaxSetup({
                async: false
            });

            getOSSAuth();

            // 请求历史的标记位点信息
            $.post("xgtl/listxgtlwdt.shtml", {
                "tx_number": tx_number
            }, function (res) {

                if (res.status.length > 0) {
                    xgtlTagId = res.status[0].tx_id;
                    console.log(xgtlTagId)
                    var Data = JSON.parse(res.status[0].tx_xgtl_text);
                    var dataA = Data.A,
                        dataV = Data.V,
                        dataT = Data.T;
                    dataA.map(function (i, v) {
                        var tag_span_a1 =
                            '<span class="mark-line mark-line-a" style="transform: rotate(' + i
                            .rotate + 'deg);" data-rotate="' + i.rotate + '"></span>';
                        var num = parseInt(i.markNum);
                        var markDom =
                            '<div title="双击调整线条角度" onmouseover="markMovePoint(this)" class="mark-target-a mark-target-a' +
                            num + '" data-num=' + num + ' style="left:' + i.left + 'px;top:' +
                            i.top + 'px;">' + num + tag_span_a1 + '</div>';
                        $(markDom).appendTo($("#point_mark_img_wrap1"));
                        $("#pointMarkWrap_a").find("div.point-mark-a-item").eq(num - 1).addClass(
                            "not-allow").attr("title", "点击移除标记");
                    })

                    dataV.map(function (i, v) {
                        var tag_span_a1 =
                            '<span class="mark-line mark-line-v" style="transform: rotate(' + i
                            .rotate + 'deg);" data-rotate="' + i.rotate + '"></span>';
                        var num = parseInt(i.markNum);
                        var markDom =
                            '<div title="双击调整线条角度" onmouseover="markMovePoint(this)" class="mark-target-v mark-target-v' +
                            num + '" data-num=' + num + ' style="left:' + i.left + 'px;top:' +
                            i.top + 'px;">' + num + tag_span_a1 + '</div>';
                        $(markDom).appendTo($("#point_mark_img_wrap1"));
                        $("#pointMarkWrap_a").find("div.point-mark-v-item").eq(num - 1).addClass(
                            "not-allow").attr("title", "点击移除标记");
                    })

                    dataT.map(function (i, v) {
                        var random = getramNumber(); //随机类名
                        var X, Y;
                        var width = parseInt(i.width) + 4;
                        var tag_span_a2 =
                            '<span class="mark-text-line" style="transform: rotate(' + i.rotate +
                            'deg);" data-rotate="' + i.rotate + '"></span>';
                        var my_addTextTpl =
                            '<div onmousedown="markMovePoint2(this)"  class="add-mark-text-wrap active ' +
                            random + ' " style="width:' + width + 'px;left:' + i.left +
                            'px;top:' + i.top + 'px;">' +
                            '<input type="text" value="' + i.text +
                            '"  placeholder="添加说明" style=width:' + width +
                            'px; class="mark-text-ipt">' +
                            '<span class="remove-mark-text">×</span>' +
                            tag_span_a2 +
                            '</div>';
                        var $tpl = $(my_addTextTpl);
                        $tpl.appendTo($("#point_mark_img_wrap1"));
                    })
                }
            })

            // 请求最近的6条位点记录
            $.ajax({
                type: "POST",
                data: {
                    "tx_number": tx_number,
                    "list_type": "0"
                },
                url: "xgtl/xgtlwdtlist.shtml",
                async: false,
                timeout: 10000,
                success: function (res) {
                    if (res.status.length == 0) {
                        $("#pointMarkListtbody").append('<tr><td colspan="3">暂无位点记录数据</td></tr>');
                        return false;
                    }

                    var data = res.status;
                    var resArr = {
                        data: data
                    };
                    //渲染历史记录模板
                    var $ListHtml = template('markListTpl_a', resArr);
                    $("#pointMarkListtbody").append($ListHtml)
                }
            })

            // 添加标记S
            $("#pointMarkWrap_a").on("click.mark", "div.point-mark-a-item,div.point-mark-v-item", function () {
                if (localStorage.getItem("xgtlMarkImgStatus") == "empty") {
                    layer.msg("请先上传需要标记的图片！")
                    return false;
                }
                if (localStorage.getItem("xgtlMarkStatus") != "active") {
                    layer.msg("当前处于非编辑状态！")
                    return false;
                }
                var $that = $(this),
                    dataTag = $that.data("tag"),
                    dataText = $that.text(),
                    index = parseInt(dataText),
                    tag_i = dataTag + dataText,
                    tag_sign = dataTag == "-a" ? "A端" : "V端";

                if ($that.hasClass("not-allow")) {
                    $(".mark-target" + tag_i).fadeOut(1000).remove();
                    $that.removeClass("not-allow").attr("title", "点击添加标记");
                    /* layer.confirm('确认移除' + tag_sign + '标记 '+ index +' ?', {icon: 3, title:'提示'}, function(i){
                        $(".mark-target"+tag_i).fadeOut(1000).remove();
                        $that.removeClass("not-allow").attr("title","点击添加标记");
                         layer.msg(tag_sign + "标记 "+index+" 已移除！")
                        layer.close(i);
                    }); */
                    return false;
                }
                $that.addClass("not-allow").attr("title", "点击移除标记");

                var markDom = "",
                    tag_a_style = "left:150px;top:" + index * 34 + "px;",
                    tag_v_style = "left:450px;top:" + index * 34 + "px;";
                var tag_span_a1 = '<span class="mark-line mark-line-a"  data-rotate="30"></span>';
                var tag_span_v1 = '<span class="mark-line mark-line-v"  data-rotate="150"></span>';

                if (dataTag == "-a") {
                    markDom =
                        '<div title="双击调整线条角度" onmouseover="markMovePoint(this)" class="mark-target-a mark-target' +
                        tag_i + '" data-num=' + index + ' style=' + tag_a_style + '>' + index +
                        tag_span_a1 + '</div>';

                } else {
                    markDom =
                        '<div title="双击调整线条角度" onmouseover="markMovePoint(this)" class="mark-target-v mark-target' +
                        tag_i + '" data-num=' + index + ' style=' + tag_v_style + '>' + index +
                        tag_span_v1 + '</div>';
                }

                $(markDom).appendTo($("#point_mark_img_wrap1"));
            })

            // 添加文本框
            $("#addMarkText").off("click.addtext").on("click.addtext", function () {
                if (localStorage.getItem("xgtlMarkImgStatus") == "empty") {
                    layer.msg("请先上传需要标记的图片！")
                    return false;
                }
                var random = getramNumber(); //随机类名
                var X, Y;
                var tag_span_a2 = '<span class="mark-text-line" data-rotate="45"></span>';
                var my_addTextTpl =
                    '<div onmousedown="markMovePoint2(this)"  class="add-mark-text-wrap active ' +
                    random + '">' +
                    '<input type="text" defaultValue="添加说明"  placeholder="添加说明" class="mark-text-ipt">' +
                    '<span class="remove-mark-text">×</span>' +
                    tag_span_a2 +
                    '</div>';
                var $tpl = $(my_addTextTpl);
                $tpl.appendTo($("#point_mark_img_wrap1"));
            })

            // 查看位点使用历史记录
            $("#markHistoryBtn").on("click", function () {
                $.ajax({
                    type: "POST",
                    data: {
                        "tx_number": tx_number,
                        "list_type": ""
                    },
                    url: "xgtl/xgtlwdtlist.shtml",
                    async: false,
                    timeout: 10000,
                    success: function (res) {
                        if (res.status.length == 0) {
                            layer.msg("暂无位点使用记录")
                            return false;
                        }
                        var data = res.status;
                        var resArr = {
                            data: data
                        };
                        //渲染历史记录模板
                        var $lipgListHtml = template('markListTpl', resArr);

                        var openId = layer.open({
                            title: ['位点列表历史记录'],
                            type: 1,
                            resize: false,
                            scrollbar: true,
                            skin: 'layui-layer-green',
                            shadeClose: true,
                            area: ['800px', '600px'],
                            content: $lipgListHtml
                        });
                        var list_box = $(".more-marktag-list2")[0];
                        if (list_box.scrollHeight > list_box.clientHeight || list_box.offsetHeight >
                            list_box.clientHeight) {
                            $(".more-mark-head").css("width", "743px");
                        }
                    }
                })
            })
            /* 查看位点使用历史记录End */
        });

        function xgtlImgLoadError() {
            localStorage.setItem("xgtlMarkImgStatus", "empty");
        }

        // 随机的类名
        function getramNumber() {
            var result = 'add-';
            for (var i = 0; i < 10; i++) {
                result += Math.floor(Math.random() * 16).toString(16); //获取0-15并通过toString转16进制
            }
            return result;
        }

        // 计算文本的宽度
        function textWidth(text) {
            var sensor = $('<pre>' + text + '</pre>').css({
                display: 'none'
            });
            $('body').append(sensor);
            var width = parseInt(sensor.width());
            sensor.remove();
            return width;
        };

        // 输入框宽度自适应
        $("body").off('keyup.mark-text-ipt').on('keyup.mark-text-ipt', "input.mark-text-ipt", function () {
            var width = textWidth($(this).val());
            this.dataset.width = parseInt(width) + 6;
            if (width > 200) {
                width = 200
            }
            if (width < 80) {
                width = 80
            }
            var $that = $(this);
            $that.width(width);

            $that.parent(".add-mark-text-wrap").width(width + 24)
        });

        function reloadXgtlPage() {
            layer.confirm('确认取消 ?', {
                icon: 3,
                title: '提示'
            }, function (i) {
                layer.close(i);
                $("#mainpage").empty().append(reloadXgtlPageDOM);
            });
        }

        /** 获取图片名称 **/
        var eleFile = document.querySelector('#PointMarkImg');

        if (window.FormData) {
            // 压缩图片需要的一些元素和对象
            var reader = new FileReader(),
                img = new Image();

            // 选择的文件对象
            var file = null;

            // 缩放图片需要的canvas
            var canvas = document.createElement('canvas');
            var context = canvas.getContext('2d');

            // base64地址图片加载完毕后
            img.onload = function () {
                // 图片原始尺寸
                var originWidth = this.width;
                var originHeight = this.height;

                // 计算出目标压缩尺寸
                var maxWidth = 600,
                    maxHeight = 800;

                // 目标尺寸
                var targetHeight, targetWidth;
                //targetWidth = 600;targetHeight = 600*1.7778;

                // 按照宽度限定尺寸
                targetWidth = maxWidth;
                targetHeight = Math.round(maxWidth * (originHeight / originWidth));

                //按照高度限定尺寸
                /* targetHeight = maxHeight;
                targetWidth = Math.round(maxHeight * (originWidth / originHeight)); */
                canvas.width = targetWidth;
                canvas.height = targetHeight;

                // 清除画布
                context.clearRect(0, 0, targetWidth, targetHeight);

                // 图片压缩
                context.drawImage(img, 0, 0, targetWidth, targetHeight);

                // 转为blob并上传
                canvas.toBlob(function (blob) {
                    upload(blob)

                }, file.type || 'image/png');
            };

            // 文件base64化，以便获知图片原始尺寸
            reader.onload = function (e) {
                // 图片尺寸
                img.src = e.target.result;
            };
            eleFile.addEventListener('change', function (event) {
                file = event.target.files[0];
                //console.log(file)
                if (file.type.indexOf("image") == 0) {
                    reader.readAsDataURL(file);
                } else {
                    layer.alert("仅支持图片格式为jpg、gif、bmp、png、jpeg的文件！")
                }
            });
        }

        //上传图片到OSS
        var tx_number = $("#tx_number").val();
        var accessid = '',
            policy = '',
            Signature = '',
            key = "xgtl/${userinfo.USER_ID.substring(0, 4)}/" + tx_number + ".png",
            host = '',
            expire = 0,
            now = 0;
        //获取授权
        function getOSSAuth() {
            now = Date.parse(new Date()) / 1000;
            if (expire < now + 3) {
                $.post("${ctx}OSSAuth/yjxgtl.shtml", function (data) {
                    accessid = data.accessid;
                    policy = data.policy;
                    signature = data.signature;
                    expire = data.expire;
                    host = data.host;
                });
            }
        }

        //获取文件后缀名 
        function get_suffix(filename) {
            pos = filename.lastIndexOf('.')
            suffix = ''
            if (pos != -1) {
                suffix = filename.substring(pos)
            }
            return suffix;
        }

        function upload(blob) {
            getOSSAuth(); //获取授权
            var index_up = layer.load(2, {
                time: 10 * 1000
            })
            var uploading_index = null;
            var fileval = $("input[name='mark_img']").val();
            var request = new FormData();
            request.append('OSSAccessKeyId', accessid);
            request.append('policy', policy);
            request.append('Signature', signature);
            request.append('key', key); //+filename
            request.append('success_action_status', '200'); //status头，如果不设置返回的是204
            request.append('Access-Control-Allow-Origin', '*');
            request.append('Access-Control-Allow-Methods', 'GET, POST');
            request.append('file', blob);
            $.ajax({
                url: host,
                data: request,
                processData: false,
                cache: false,
                async: false,
                contentType: false,
                //关键是要设置contentType 为false，不然发出的请求头 没有boundary
                type: "POST",
                beforeSend: function () {
                    uploading_index = layer.msg("图片上传中...", {
                        time: 8000
                    })
                },
                success: function (data, textStatus, request) {
                    if (request.status == '200') {
                        layer.msg("图片上传成功");
                        $("div[class^='mark-target']").remove();
                        $("div.point-mark-items > div").removeClass("not-allow").attr("title", "点击添加标记");
                        var time = Date.parse(new Date());
                        $("#ossPointMarkImg").attr("src",
                            "https://biangene.oss-cn-shenzhen.aliyuncs.com/xgtl/${userinfo.USER_ID.substring(0, 4)}/" +
                            tx_number + ".png?tt=" + time);
                        localStorage.setItem("xgtlMarkImgStatus", "normal");
                    }
                },
                error: function (data, textStatus, request) {
                    layer.msg("上传失败，请重试！");
                },
                complete: function () {
                    layer.close(index_up)
                    layer.close(uploading_index)
                }
            });
        }
        //********************************位点标注End*************************************************//
        var html = '<table border="0" style="font-size:9pt;" width="300px" align="center">' +
            '<thead style="display:table-header-group;font-weight:bold">' +
            '<tr>' +
            '<td colspan="4" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</td>' +
            '</tr>' +
            '<tr>' +
            '<td>姓名：' + res.hzinfo.tx_name + '</td>' +
            '<td>病区：' + res.hzinfo.tx_bing_qu + '</td>' +
            '<td>床号：' + res.hzinfo.tx_bed_number + '</td>' +
            '<td>住院号：' + res.hzinfo.tx_zyid + '</td>' +
            '</tr>' +
            '</thead>' +
            '<tbody></tbody>' +
            '</table>';
        var content = '<tr class="course-name"><td colspan="4"><span style="margin-right:60px;">'+ record_time +'</span>' + record_name + '</td></tr>';
        var content2 = '<tr class="course-content"><td colspan="4">'+ record_content + '</td></tr>';
        var c3 = '<tr class="doctor-sign"><td colspan="4">医师签名：    </td></tr>'
    </script>
    <table border="0" style="font-size:9pt;" width="300px" align="center">
        <thead style="display:table-header-group;font-weight:bold">
            <tr>
                <td colspan="4" align="center" style="font-weight:bold;border:3px double red">每页都有的表头</td>
            </tr>
            <tr>
                '
                <td>姓名：' + res.hzinfo.tx_name + '</td>' + '
                <td>病区：' + res.hzinfo.tx_bing_qu + '</td>' + '
                <td>床号：' + res.hzinfo.tx_bed_number + '</td>' + '
                <td>住院号：' + res.hzinfo.tx_zyid + '</td>' +
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <table border="0" style="font-size:9pt;" width="100%" align="center">
            <thead style="display:table-header-group;font-weight:bold">
            <tr>
            <td colspan="4" align="center" style="font-weight:bold;border:3px double red">{{hos_name}}</td>
            </tr>
            <tr>
            <td>姓名：{{ hzinfo.tx_name}} </td>
            <td>病区：{{ hzinfo.tx_bing_qu}} </td>
            <td>床号：{{ hzinfo.tx_bed_number}} </td>
            <td>住院号：{{ hzinfo.tx_zyid}} </td>
            </tr>
            </thead>
            <tbody id="txbc_print_tbody">               </tbody>
            </table></body>

</html>